<template>
    <div id="Write">

        <div id="middle-nav">
            <ul>
                <li>当前位置:</li>
                <li>发表</li>
                <li>></li>
                <li>写文章</li>
            </ul>
        </div>
        <div id="editarea">
            <div id="title">
                <span>标题：</span>
                <input type="text" v-model="articleData.inputData">

            </div>
            <div id="autor">
                <span>作者：</span>
                <input type="text" v-model="articleData.autorName">

            </div>
            <span>请在下面编辑器编辑内容</span>
            <Editor ref="Editor"></Editor>
            <button id="clear" @click="clear">清空编辑内容</button>
            <button id="publish" @click="pubArchive()" :whether="whether">快速发布</button>
        </div>
    </div>
</template>

<script>

    import Editor from "./Editor";

    export default {
        data() {
            return {
                whether: "",
                articleData: {
                    textData: "",
                    inputData: '',
                    autorName: '',
                    time: ''
                }

            }
        },
        components: {
            Editor
        },
        methods: {
            pubArchive() {
                // 通过代码获取编辑器内容
                // this.articleData.textData = this.editor.txt.html()
                console.log(this.articleData)
                let date = new Date()
                let year = date.getFullYear()
                let month = date.getMonth() + 1
                let day = date.getDate()
                let time = year + "-" + month + "-" + day
                this.whether = "true";
                this.articleData.time = time
                this.articleData.textData = this.$refs.Editor.textData()
                if (this.articleData.inputData !== "" && this.editorData !== "") {
                    // console.log("内容不为空！！")
                    fetch(process.env.VUE_APP_API_URL + "/article", {
                        method: 'post',
                        body: JSON.stringify(this.articleData),
                        headers: new Headers({
                            'Content-Type': 'application/json'
                        })
                    })
                        .then((res) => {
                            return res.json()
                            // console.log(res.json())
                        })
                        .then((data) => {
                            console.log(data)
                            if (data == "发布成功") {
                                alert("发布成功!!!")
                                Object.assign(this.$data.articleData, this.$options.data().articleData)
                                this.$refs.Editor.clear();
                                this.$router.push("/PcIndex/Archive")
                                // location.reload();
                            }
                        })
                        .catch((error) => { console.error('Error:', error) })

                } else {
                    alert("请输入标题和内容！！")
                }

            },
            clear() {
                this.$refs.Editor.clear();
            },

        },



    }

</script>

<style scoped>
    #middle-nav {
        background-color: white;
        color: gray;
        margin-bottom: 5px;
    }

    #middle-nav>ul {
        vertical-align: middle;
    }

    #middle-nav>ul>li {
        float: left;
        margin: 10px 0 10px 10px;

    }

    #middle-nav>ul>li:first-child {
        padding-right: 10px;
        padding-left: 10px;

    }

    #title {
        margin: 10px 10px;
    }

    #title>input {
        height: 20px;
        width: 400px;
    }

    #autor {
        margin: 10px 10px;
    }

    #autor>input {
        height: 20px;
        width: 400px;
    }

    #editarea>span {
        font-size: 10px;
        margin: 10px 10px 0px;
    }

    #clear {
        background: white;
    }

    #publish {
        width: 80px;
        height: 30px;
        background-color: rgb(50, 114, 225);
        margin: 10px auto;
        border-radius: 6px;
        font-weight: bold;
        color: rgb(176, 173, 173);
        right: 0;
        left: 0;
        display: block;

    }
</style>